<template>
    <div>
        <div class="announcememtTitle">
            <div class="title">全部公告</div>
            <div class="title">安全公告</div>
            <div class="title">服务公告</div>
            <div class="title">活动公告</div>
            <div class="title">故障公告</div>
        </div>
        <div>
            <el-table :data="announcementData" height="calc(100% - 76px)" :header-cell-style="headerStyle">
                <!-- <el-table-column align="center" label="序号" type="index" width="80">
                </el-table-column> -->
                <el-table-column align="left" prop="message" label="全部公告" min-width="500" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="type" label="" min-width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="name" label="" min-width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="" min-width="120" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :page="page"
                :limit="limit" :total="total"></pagination>
        </div>
    </div>
</template>

<script>
    import tableStyleMixin from "@mixin/table-style";
    import Pagination from "@components/Pagination.vue";
    export default {
        components: {
            Pagination,
        },
        mixins: [tableStyleMixin],
        data() {
            return {
                announcementData: [{
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }, {
                    message: '【公告】关于开展核实清理虚假备案专项工作的通知',
                    type: '服务公告',
                    createTime: '2022-06-16 16:22:55',
                }],
                page: 1,
                limit: 10,
                total: 10,
            };
        },
        methods: {
            handleSizeChange() {},
            handleCurrentChange() {},

        },
    };
</script>

<style scoped lang="less">
    .announcememtTitle {
        display: flex;
        width: 42%;
        justify-content: space-between;
        color: @primaryThemeTxtColor;
        margin-bottom: 20px;

        .title {
            border: 1px solid @primaryBorderColor;
            padding: 6px 18px;
            font-size: 14px;
            cursor: pointer;

            &:hover {
                border: 1px solid #655dcf;
                color: #655dcf;
            }
        }
    }
</style>